<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('上传资料')}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <form class="form-horizontal m" id="course-file-add">
        <input type="hidden" name="courseId" th:value="${courseId}">
        <input type="hidden" name="fileSize" id="fileSize">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">文件地址</label>
            <div class="col-sm-6">
                <input class="form-control" type="text" id="fileUrl" name="fileUrl" required>
            </div>
            <div class="col-sm-2">
                <label for="avatar" class="btn btn-sm btn-danger"><i class="fa fa-upload"></i> 上传文件</label>
                <input type="file" onchange="fileUpdate()" style="display: none" value="" name="avatar" id="avatar" accept="/*"/>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">文件名</label>
            <div class="col-sm-6">
                <input class="form-control" type="text" id="title" name="title" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">显示顺序</label>
            <div class="col-sm-4">
                <input class="form-control" type="text" value="0" name="sort" required>
            </div>
        </div>
    </form>
</div>
<th:block th:insert="~{include :: footer}" />
<script type="text/javascript">
    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save("/course/file/save.json", $('#course-file-add').serialize());
        }
    }

    function fileUpdate() {
        var file = $('#avatar')[0].files[0];
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            url: "/upload/file.json",
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            dataType:"json",
            mimeType:"multipart/form-data",
            success: function(result) {
                if(result.code === 0){
                    $("#fileUrl").val(result.data);
                    $("#fileSize").val(file.size);
                    $("#title").val((file.name));
                    window.layer.msg('上传成功', {icon: 1});
                }else{
                    window.layer.msg('上传失败', {icon: 2});
                }
            }
        })
    }
</script>
</body>
</html>
